<template>
	<base-page bgColor="#AE2326">
		<view slot="header">
			<cu-custom :backSolt="true" :isBack="true" bgColor="bg-orange-red">
				<block slot="backbox">
					<view class="df-ai-cen">
						<!-- 	<view class="index-header-icon" @click="detailBackBtn">
							<image :src="staticImgUrl + 'home/index-muen.png'" mode="" style="width: 100%;height: 100%;"></image>
						</view> -->
						<button class="cu-btn cuIcon index-header-icon" @click="detailBackBtn">
							<image :src="staticImgUrl + 'shop/detail-back.png'" mode="" style="width: 100%;height: 100%;"></image>
						</button>
						<!-- #ifdef MP-WEIXIN -->
						<view class="index-header-icon" @click="toSearchindex()">
							<image :src="staticImgUrl + 'home/index-search.png'" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- #endif -->
					</view>
				</block>
				<block slot="content">顺德迎春云花市</block>
				<!-- #ifndef MP-WEIXIN -->
				<block slot="right">
					<view class="index-header-icon" @click="toSearchindex()">
						<image :src="staticImgUrl + 'home/index-search.png'" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</block>
				<!-- #endif -->
			</cu-custom>
		</view>
		<view slot="center" style="height: 100%;">
			<!-- 轮播图 -->
			<block><image-ads :imgList="imgAdslist" :height="210"></image-ads></block>
			<block>
				<view class="huashi-bg">
					<view class="df-cen huashi-title"><image :src="staticImgUrl + 'huashi/areaTitle.png'" mode="widthFix" class="title-image"></image></view>
					<view class="rukou-content ">
						<view
							v-for="(item, inx) in entranceList"
							:key="inx"
							class="rukou-item animation-slide-bottom"
							:style="{ animationDuration: inx * 0.1 + 0.4 + 's' }"
							@click="ceshi(item)"
						>
							<image :src="item.imageUrl" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
				</view>
			</block>
			<block>
				<view class="huashi-bg huashi-top">
					<view class="df-cen huashi-title"><image :src="staticImgUrl + 'huashi/tuangou.png'" mode="widthFix" class="title-image"></image></view>
					<view class="tuangoulist-box ">
						<view v-for="(item, inx) in tuangouList" :key="inx" class="tuangou-item df-col">
							<view class="df-cen"><image :src="$Utils.img(item.sku_image)" mode="aspectFill" class="tuangou-item-img"></image></view>
							<view class="tuangou-item-title">{{ item.sku_name }}</view>
							<view class="tuangou-item-price df-cen-rl">
								<view class="price-item">¥{{ item.price }}</view>
								<button class="cu-btn round bg-orange-red shadow sm" @click="goodsPay(item)">去购买</button>
							</view>
						</view>
					</view>
					<view class="df-cen chakangenduo"><button class="cu-btn round bg-orange-red shadow sm" @click="jumpGoodsList">查看更多</button></view>
				</view>
			</block>
			<!-- 直播 -->
			<block>
				<view class="huashi-bg huashi-top">
					<view class="df-cen huashi-title"><image :src="staticImgUrl + 'huashi/liveTitle.png'" mode="widthFix" class="title-image"></image></view>
					<view class="huashi-live-box " @click="jumpTo">
						<view class="huashi-live-image"><image :src="staticImgUrl + 'huashi/play.png'" mode="widthFix" style="width: 100%;"></image></view>
						<view class="huashi-live-play"><image :src="staticImgUrl + 'huashi/playBtn.png'" mode="widthFix" style="width:90rpx"></image></view>
					</view>
					<view class="df-cen chakangenduo"><button class="cu-btn round bg-orange-red shadow sm" @click="jumpLiveList">查看更多</button></view>
				</view>
			</block>
			<!-- 秒杀商品 -->
			<block>
				<view class="huashi-bg huashi-top">
					<view class="df-cen huashi-title"><image :src="staticImgUrl + 'huashi/seckill.png'" mode="widthFix" class="title-image"></image></view>
					<view class="miaosha-tabbox df-cen-rl">
						<view class="miaosha-tab df-col-cen" v-for="(val, inx) in miaoshaList" :key="inx" :class="miaoshaTab == inx ? 'cccc' : ''" @click="miaoBtn(val, inx)">
							<view class="miaosha-tab-title">{{ val.seckill_start_time_show.slice(0, 5) }}</view>
							<view class="miaosha-tab-time">{{ val.miao_name }}</view>
							<view class="hengxiang"></view>
						</view>
					</view>
					<view class="tuangoulist-box ">
						<view v-for="(item, inx) in miaoGoods" :key="inx" class="tuangou-item df-col">
							<view class="df-cen"><image :src="$Utils.img(item.sku_image)" mode="aspectFill" class="tuangou-item-img"></image></view>
							<view class="tuangou-item-title">{{ item.sku_name }}</view>
							<view class="tuangou-item-price df-cen-rl">
								<view class="price-item">¥{{ item.seckill_price }}</view>
								<button class="cu-btn round bg-grey shadow sm" @click="miaoshaPay(item)" v-if="item.miao_type == 0">已结束</button>
								<button class="cu-btn round bg-orange-red shadow sm" @click="miaoshaPay(item)" v-if="item.miao_type == 1">去秒杀</button>
								<button class="cu-btn round bg-grey shadow sm" @click="miaoshaPay(item)" v-if="item.miao_type == 2">未开始</button>
							</view>
						</view>
					</view>
					<view class="df-cen chakangenduo"><button class="cu-btn round bg-orange-red shadow sm" @click="miaoduo">查看更多</button></view>
				</view>
			</block>
			<block>
				<view class="huashi-bg huashi-top">
					<view class="df-cen huashi-title"><image :src="staticImgUrl + 'huashi/goodtree.png'" mode="widthFix" class="title-image"></image></view>
					<view class="tuangoulist-box ">
						<view v-for="(item, inx) in jushuList" :key="inx" class="tuangou-item df-col">
							<view class="df-cen"><image :src="$Utils.img(item.sku_image)" mode="aspectFill" class="tuangou-item-img"></image></view>
							<view class="tuangou-item-title">{{ item.sku_name }}</view>
							<view class="tuangou-item-price df-cen-rl">
								<view class="price-item">¥{{ item.price }}</view>
								<button class="cu-btn round bg-orange-red shadow sm" @click="goodsPay(item)">去购买</button>
							</view>
						</view>
					</view>
					<view class="df-cen chakangenduo"><button class="cu-btn round bg-orange-red shadow sm" @click="jumpGoodsList">查看更多</button></view>
				</view>
			</block>
			<!-- #ifdef H5 -->
			<block v-if="!isNativeApp() && shareContent != null"><wx-config :shareContent="shareContent"></wx-config></block>
			<!-- #endif -->
		</view>
	</base-page>
</template>

<script>
import ImageAds from '@/components/index/image-ads.vue'; // 轮播图组件
// #ifdef H5
import wxConfig from '@/components/global/wx-config.vue';
// #endif
export default {
	data() {
		return {
			getGoodsObj: {
				category_id: 19,
				category_level: 1,
				page: 1,
				page_size: 2
			},
			miaoshaTab: null,
			miaoshaList: [],
			miaoGoods: [],
			tuangouList: [],
			jushuList: [],
			shareContent: {
				title: '2021顺德云花市', // 分享标题
				shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
				thumbUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png' // 分享图标
			},
			imgAdslist: [
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/header-banner.png',
					link: {}
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/swiper1.jpg',
					link: {}
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/swiper2.jpg',
					link: {}
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/swiper5.jpg',
					link: {}
				}
			],
			entranceList: [
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/0.png',
					id: 28,
					name: '陈村'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/1.png',
					id: 34,
					name: '北滘'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/2.png',
					id: 43,
					name: '伦教'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/3.png',
					id: 44,
					name: '勒流'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/4.png',
					id: 45,
					name: '大良'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/5.png',
					id: 46,
					name: '容桂'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/6.png',
					id: 47,
					name: '乐从'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/7.png',
					id: 57,
					name: '龙江'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/8.png',
					id: 49,
					name: '杏坛'
				},
				{
					imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/areas/9.png',
					id: 50,
					name: '均安'
				}
			]
		};
	},
	onLoad(e) {
		// 处理秒杀
		this.$Apis.getListsHua().then(res => {
			console.log('处理秒杀', res.list);
			let newARR = res.list;
			let newSeckillObj = null;
			let type = true;
			this.miaoshaList = newARR.map((v, i) => {
				let end = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_end_time * 1000;
				let start = new Date(this.$Utils.dateStr('', false)).getTime() + v.seckill_start_time * 1000;
				// 获取合适时间的秒杀
				if (end > new Date().getTime() && start < new Date().getTime()) {
					v['miao_type'] = 1;
					v['miao_name'] = '进行中';
					if (type) {
						newSeckillObj = v;
						this.miaoshaTab = i;
					}
					type = false;
				}
				// 未开始
				if (end > new Date().getTime() && start > new Date().getTime()) {
					v['miao_type'] = 2;
					v['miao_name'] = '未开始';
				}
				// 已结束
				if (end < new Date().getTime()) {
					v['miao_type'] = 0;
					v['miao_name'] = '已结束';
				}
				return v;
			});
			if (newARR.length > 0) {
				if (newSeckillObj == null) {
					newSeckillObj = this.miaoshaList[0];
					this.miaoshaTab = 0;
				}
				this.$Apis.getSeckillGoods({ seckill_id: newSeckillObj.seckill_id, page: 1, page_size: 2 }).then(res => {
					let xxx = [];
					res.list.forEach(val => {
						let end = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_end_time * 1000;
						let start = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_start_time * 1000;
						// 获取合适时间的秒杀
						if (end > new Date().getTime() && start < new Date().getTime()) {
							val['miao_type'] = 1;
							val['miao_name'] = '进行中';
						}
						// 未开始
						if (end > new Date().getTime() && start > new Date().getTime()) {
							val['miao_type'] = 2;
							val['miao_name'] = '未开始';
						}
						// 已结束
						if (end < new Date().getTime()) {
							val['miao_type'] = 0;
							val['miao_name'] = '已结束';
						}
						xxx.push(val);
					});
					this.miaoGoods = xxx;
				});
			}
			// miaoshaList
		});
		// 获取团购
		this.$Apis.getHuaShiGoods({ ...this.getGoodsObj, keyword: '团购' }).then(res => {
			this.tuangouList = res.list;
		});
		// 获取优秀桔数
		this.$Apis.getHuaShiGoods(this.getGoodsObj).then(res => {
			this.jushuList = res.list;
		});
	},
	onShow(e) {},
	components: {
		ImageAds,
		// #ifdef H5
		wxConfig
		// #endif
	},
	methods: {
		ceshi(val) {
			this.$Router.push({
				path: '/publicPages/activity/hualisttree',
				query: {
					id: val.id
				}
			});
			// this.$Utils.tip('花市入口正在逐步开放敬请期待');
		},
		goodsPay(val) {
			this.$Router.push({
				path: '/shopPages/goods/detail',
				query: {
					goods_id: val.sku_id,
					is_id: val.sku_id,
					type: 1
				}
			});
		},
		miaoshaPay(val) {
			// console.log('log', val);
			if (val.miao_type == 1) {
				this.$Router.push({
					path: '/shopPages/goods/seckill',
					query: {
						goods_id: val.id,
						is_id: val.sku_id
					}
				});
			} else {
				this.$Utils.tip(`该秒杀商品${val.miao_name}`);
			}
			// console.log(val.miao_type, val.seckill_id, val.sku_id, val.miao_name, 'vaaava');
		},
		miaoBtn(val, i) {
			this.$Apis.getSeckillGoods({ seckill_id: val.seckill_id, page: 1, page_size: 2 }).then(res => {
				let xxx = [];
				res.list.forEach(val => {
					let end = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_end_time * 1000;
					let start = new Date(this.$Utils.dateStr('', false)).getTime() + val.seckill_start_time * 1000;
					// 获取合适时间的秒杀
					if (end > new Date().getTime() && start < new Date().getTime()) {
						val['miao_type'] = 1;
						val['miao_name'] = '进行中';
					}
					// 未开始
					if (end > new Date().getTime() && start > new Date().getTime()) {
						val['miao_type'] = 2;
						val['miao_name'] = '未开始';
					}
					// 已结束
					if (end < new Date().getTime()) {
						val['miao_type'] = 0;
						val['miao_name'] = '已结束';
					}
					xxx.push(val);
				});
				this.miaoGoods = xxx;
				this.miaoshaTab = i;
			});
		},
		miaoduo() {
			this.$Router.push({
				path: '/publicPages/activity/timeLimit'
			});
		},
		jumpLiveList() {
			this.$Utils.tip('暂无更多直播~~~');
		},
		jumpGoodsList() {
			this.$Router.push({
				path: '/publicPages/activity/huashulist'
			});
		},
		jumpTo() {
			let live_url = 'https://foshanbeta.shmedia.tech/newFszb/index.html#/live?id=9aa28d3b382a4057be331fdebf491d92&liveModel=0';
			// #ifdef H5
			location.href = live_url;
			// #endif
			// #ifdef MP-WEIXIN
			uni.setStorageSync('weburl', live_url);
			this.$Router.push({
				path: '/publicPages/activity/outerchain'
			});
			// #endif
			// this.$Router.push({
			// 	path: '/publicPages/activity/huashiVideo'
			// });
		},
		toSearchindex() {
			this.$Router.push({
				path: '/shopPages/searchindex/searchindex'
			});
		},
		// 返回页面
		detailBackBtn() {
			this.$Utils.compatiBleJump({ key: 'exit' }, 1);
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.huashi-bg {
	background-color: #d3182c;
}
.title-image {
	width: 290rpx;
}
.huashi-top {
	margin-top: 10rpx;
}
.huashi-title {
	padding: 50rpx 0 30rpx;
}
.rukou-content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 30rpx;
	.rukou-item {
		width: 330rpx;
		margin-bottom: 20rpx;
	}
}
.tuangoulist-box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 30rpx;
	.tuangou-item {
		width: 330rpx;
		height: 500rpx;
		padding: 20rpx 20rpx 40rpx;
		background-image: url('https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/huashi/item-bgc.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.tuangou-item-img {
		width: 180rpx;
		height: 260rpx;
	}
	.tuangou-item-title {
		margin: 20rpx 0;
		width: 260rpx;
		height: 70rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.tuangou-item-price {
		.price-item {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #c23134;
		}
	}
}
.chakangenduo {
	padding: 40rpx 0;
}
.huashi-live-box {
	position: relative;
	padding: 30rpx;
	.huashi-live-image {
		border: 6rpx solid #f3ce92;
		width: 100%;
	}
	.huashi-live-play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
.miaosha-tabbox {
	background-color: #f8e0c5;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	.miaosha-tab {
		flex: 1;
		.miaosha-tab-title {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9d886f;
		}
		.miaosha-tab-time {
			margin: 4rpx 0 14rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #9d886f;
		}
		.hengxiang {
			width: 40rpx;
			border-radius: 8rpx;
			height: 8rpx;
			margin-bottom: 4rpx;
		}
	}
	.cccc {
		.miaosha-tab-title {
			color: #c23134;
		}
		.miaosha-tab-time {
			color: #c23134;
		}
		.hengxiang {
			background-color: #c23134;
		}
	}
}
.index-header-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 24rpx;
}
</style>
